<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layout 管理界面大布局示例 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.9.21-rc.3/dist/css/layui.css" rel="stylesheet">
    <style>
        .tab-title {
            display: inline-block;
            background-color: #000000;
            width: 200px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 15px;
        }

        .tab_content11 {
            display: none;
        }

        .show11 {
            display: block;
        }

        .color {
            background-color: #e38df4;
            color: black;
        }

        .box {
            background-color: #e38df4;
        }

        .wrap {
            width: 250px;
            height: 250px;
            float: left;
            margin: 20px 20px;
            background-color: aquamarine;
        }

        img {
            width: 200px;
            height: 200px;
            margin: 10px 25px;
        }

        button {
            margin: 0 30px;
            background-color: #e38df4;
        }

        .add {
            position: absolute;
            top: 30%;
            left: 35%;
            background-color: rgb(242, 242, 129);
            display: none;
            text-align: center;
        }

        .add label {
            margin: 20px 40px;
            display: block;
        }

        input {
            border: 2px solid rgb(174, 169, 171);
            color: rgb(0, 0, 0);
            width: 150px;
        }

        .add2 {
            position: fixed;
            top: 80px;
            left: 200px;
            background-color: rgb(241, 203, 235);
            display: none;
            text-align: center;
        }

        .add2 label {
            margin: 20px 40px;
            display: block;
        }

        .update {
            position: fixed;
            top: 80px;
            left: 200px;
            background-color: rgb(241, 203, 235);
            display: none;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">相册中心</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <!-- <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">menu 11</a></dd>
                        <dd><a href="javascript:;">menu 22</a></dd>
                        <dd><a href="javascript:;">menu 33</a></dd>
                    </dl>
                </li> -->
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        tester
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">Your Profile</a></dd>
                        <dd><a href="javascript:;">Settings</a></dd>
                        <dd><a href="javascript:;">Sign out</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <div class="box">
                    <div class="tab-title">相册分类</div>
                    <div class="tab-title">相册数据</div>
                    <div class="tab-title">个人中心</div>
                    <!-- <div class="tab-title">tab4</div> -->
                </div>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <div class="tab_content11 show11">
                    <button class="New_album" onclick="created()">上传照片</button>
                    <button class="New_search" onclick="search()">搜索照片</button>
                    <!-- 添加框 -->
                    <div class="add">
                        <label for="">图片链接：<input type="text" class="add_link"></label>
                        <button onclick="add_no()" class="no_add">取消添加</button>
                        <button onclick="add_yes()">确认添加</button>
                    </div>

                    <!-- 搜索框 -->
                    <div class="add2">
                        <label for="">图片id：<input type="text" class="add3_link"></label>
                        <button onclick="search_no()" class="no_add">取消搜索</button>
                        <button onclick="search_yes()">确认搜索</button>
                    </div>

                    <!-- 修改框 -->
                    <div class="update">
                        <label for="">图片链接：<input type="text" class="add2_link"></label>
                        <button onclick="update_no()" class="no_add">取消修改</button>
                        <button onclick="update_yes()">确认修改</button>
                    </div>
                    <div class="box1">
                        <!-- <div class="wrap">
                            <img src="./图片/不要脸G.jpg" >
                            <button>修改</button>
                            <button>删除</button>
                        </div> -->
                    </div>
                </div>
                <div class="tab_content11">

                    <body>
                        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 单图片上传
                        </button>
                        <div style="width: 132px;">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img"
                                    style="width: 100%; height: 92px;">
                                <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes"
                                lay-filter="filter-demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                        <hr style="margin: 21px 0;">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                                <i class="layui-icon layui-icon-upload"></i> 多图片上传
                            </button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                                预览图：
                                <div class="layui-upload-list" id="upload-demo-preview"></div>
                            </blockquote>
                        </div>

                        <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
                        <script src="//unpkg.com/layui@2.9.21/dist/layui.js"></script>
                        <script>
                            layui.use(function () {
                                var upload = layui.upload;
                                var layer = layui.layer;
                                var element = layui.element;
                                var $ = layui.$;
                                // 单图片上传
                                var uploadInst = upload.render({
                                    elem: '#ID-upload-demo-btn',
                                    url: '', // 实际使用时改成您自己的上传接口即可。
                                    before: function (obj) {
                                        // 预读本地文件示例，不支持ie8
                                        obj.preview(function (index, file, result) {
                                            $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                                        });

                                        element.progress('filter-demo', '0%'); // 进度条复位
                                        layer.msg('上传中', { icon: 16, time: 0 });
                                    },
                                    done: function (res) {
                                        // 若上传失败
                                        if (res.code > 0) {
                                            return layer.msg('上传失败');
                                        }
                                        // 上传成功的一些操作
                                        // …
                                        $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                                    },
                                    error: function () {
                                        // 演示失败状态，并实现重传
                                        var demoText = $('#ID-upload-demo-text');
                                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                        demoText.find('.demo-reload').on('click', function () {
                                            uploadInst.upload();
                                        });
                                    },
                                    // 进度条
                                    progress: function (n, elem, e) {
                                        element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                                        if (n == 100) {
                                            layer.msg('上传完毕', { icon: 1 });
                                        }
                                    }
                                });
                                // 多图片上传
                                upload.render({
                                    elem: '#ID-upload-demo-btn-2',
                                    url: '', // 实际使用时改成您自己的上传接口即可。
                                    multiple: true,
                                    before: function (obj) {
                                        // 预读本地文件示例，不支持ie8
                                        obj.preview(function (index, file, result) {
                                            $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
                                        });
                                    },
                                    done: function (res) {
                                        // 上传完毕
                                        // …
                                    }
                                });
                            });

                        </script>

                    </body>

                </div>
                <div class="tab_content11">
                    <h1>嘎嘎嘎</h1>

                </div>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>

    <script src="//unpkg.com/layui@2.9.21-rc.3/dist/layui.js"></script>
    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                menuLeft: function (othis) { // 左侧菜单事件
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                },
                menuRight: function () {  // 右侧菜单事件
                    layer.open({
                        type: 1,
                        title: '更多',
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt', // 右上角
                        anim: 'slideLeft', // 从右侧抽屉滑出
                        shadeClose: true,
                        scrollbar: false
                    });
                }
            });
        });
    </script>
    <script src="./helloworld/node_modules/jquery/dist/jquery.js"></script>
    <script src="./相册.js"></script>
</body>

</html>